<template>
  <div class="theme-demo">
    <el-card class="demo-card">
      <template #header>
        <div class="card-header">
          <span class="title">主题演示</span>
          <ThemeToggle />
        </div>
      </template>
      
      <div class="demo-content">
        <el-row :gutter="24">
          <el-col :span="12">
            <h3>颜色系统</h3>
            <div class="color-palette">
              <div class="color-item primary">
                <div class="color-block"></div>
                <span>主色调</span>
              </div>
              <div class="color-item success">
                <div class="color-block"></div>
                <span>成功色</span>
              </div>
              <div class="color-item warning">
                <div class="color-block"></div>
                <span>警告色</span>
              </div>
              <div class="color-item danger">
                <div class="color-block"></div>
                <span>危险色</span>
              </div>
            </div>
          </el-col>
          
          <el-col :span="12">
            <h3>文本颜色</h3>
            <div class="text-demo">
              <p class="text-primary">主要文本颜色</p>
              <p class="text-regular">常规文本颜色</p>
              <p class="text-secondary">次要文本颜色</p>
              <p class="text-placeholder">占位符文本颜色</p>
            </div>
          </el-col>
        </el-row>
        
        <el-row :gutter="24" style="margin-top: 24px;">
          <el-col :span="12">
            <h3>按钮组件</h3>
            <div class="button-demo">
              <el-button type="primary">主要按钮</el-button>
              <el-button type="success">成功按钮</el-button>
              <el-button type="warning">警告按钮</el-button>
              <el-button type="danger">危险按钮</el-button>
              <el-button>默认按钮</el-button>
            </div>
          </el-col>
          
          <el-col :span="12">
            <h3>表单组件</h3>
            <div class="form-demo">
              <el-input v-model="demoInput" placeholder="请输入内容" />
              <el-select v-model="demoSelect" placeholder="请选择">
                <el-option label="选项1" value="1" />
                <el-option label="选项2" value="2" />
              </el-select>
            </div>
          </el-col>
        </el-row>
        
        <div style="margin-top: 24px;">
          <h3>表格组件</h3>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="role" label="角色" />
            <el-table-column prop="status" label="状态">
              <template #default="{ row }">
                <el-tag :type="row.status === '在线' ? 'success' : 'info'">
                  {{ row.status }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </div>
        
        <div style="margin-top: 24px;">
          <h3>卡片组件</h3>
          <el-row :gutter="16">
            <el-col :span="8" v-for="card in cardData" :key="card.title">
              <el-card class="demo-stat-card">
                <div class="stat-content">
                  <div class="stat-icon" :style="{ backgroundColor: card.color }">
                    <el-icon><component :is="card.icon" /></el-icon>
                  </div>
                  <div class="stat-info">
                    <div class="stat-value">{{ card.value }}</div>
                    <div class="stat-title">{{ card.title }}</div>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import ThemeToggle from '@/components/ThemeToggle.vue'

const demoInput = ref('')
const demoSelect = ref('')

const tableData = ref([
  { name: '张三', role: '管理员', status: '在线' },
  { name: '李四', role: '老师', status: '离线' },
  { name: '王五', role: '学生', status: '在线' }
])

const cardData = ref([
  { title: '总用户数', value: '1,234', color: '#409eff', icon: 'User' },
  { title: '今日访问', value: '567', color: '#67c23a', icon: 'View' },
  { title: '消息数量', value: '89', color: '#e6a23c', icon: 'Message' }
])
</script>

<style lang="scss" scoped>
.theme-demo {
  .demo-card {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .title {
        font-size: 18px;
        font-weight: 600;
        color: var(--text-color-primary);
      }
    }
  }
  
  .demo-content {
    h3 {
      color: var(--text-color-primary);
      margin-bottom: 16px;
    }
    
    .color-palette {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      
      .color-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        
        .color-block {
          width: 60px;
          height: 60px;
          border-radius: 8px;
          border: 1px solid var(--border-color);
        }
        
        span {
          font-size: 12px;
          color: var(--text-color-secondary);
        }
        
        &.primary .color-block { background-color: var(--color-primary); }
        &.success .color-block { background-color: var(--color-success); }
        &.warning .color-block { background-color: var(--color-warning); }
        &.danger .color-block { background-color: var(--color-danger); }
      }
    }
    
    .text-demo {
      .text-primary { color: var(--text-color-primary); }
      .text-regular { color: var(--text-color-regular); }
      .text-secondary { color: var(--text-color-secondary); }
      .text-placeholder { color: var(--text-color-placeholder); }
    }
    
    .button-demo {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }
    
    .form-demo {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    
    .demo-stat-card {
      .stat-content {
        display: flex;
        align-items: center;
        
        .stat-icon {
          width: 48px;
          height: 48px;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          margin-right: 16px;
          
          .el-icon {
            font-size: 24px;
          }
        }
        
        .stat-info {
          .stat-value {
            font-size: 24px;
            font-weight: 600;
            color: var(--text-color-primary);
            line-height: 1;
            margin-bottom: 4px;
          }
          
          .stat-title {
            font-size: 14px;
            color: var(--text-color-secondary);
          }
        }
      }
    }
  }
}
</style>
